@mi-passport: ~'@{mi-prefix}passport';
@mi-password: ~'@{mi-prefix}password';
.@{mi-passport} {
	margin: 0 auto;
	color: @mi-white-color;
    background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: var(--mi-passport-bg-color, @mi-passport-bg-color);
    height: 100%;
    overflow: hidden;

    &-content {
		position: relative;
		display: flex;
		justify-content: center;
		.border-radius();
		width: 100%;
        height: 100vh;
        overflow: hidden;
    }
    
    &-mask {
		background: var(--mi-passport-mask-bg-color, @mi-passport-mask-bg-color);
		opacity: .15;
		width: 100%;
		height: 100%;
		.border-radius(16);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 90;
    }
    
    &-box {
		.flex();
		flex-direction: column;
		.properties(max-width, 550);
		.properties(padding, 32);
		.properties(margin, 24);
        position: relative;

        .@{mi-passport} {
            &-title {
				.properties(font-size, 26);
				color: var(--mi-passport-color, @mi-passport-color);
				.properties(letter-spacing, 4);
				.properties(margin-right, 4);
				z-index: 100;

				img {
					.properties(width, 20);
					.properties(max-height, 20);
					.properties(margin-left);
					.border-radius();
				}
            }
            
            &-form {
				width: 100%;
				.properties(max-width, 380);
				z-index: 100;
				.properties(padding-top, 32);

				.ant-input-affix-wrapper {
					.border-radius(40);
					border-color: var(--mi-theme-color, @mi-theme-color);
					box-shadow: none;

					&:hover,
					&:focus {
						border-color: var(--mi-theme-color, @mi-theme-color);
						box-shadow: none;
					}

					> input.ant-input {
						.letter-spacing();
						.properties(padding-top, 5);
						.properties(padding-bottom, 5);
					}

					.ant-input-prefix {
						.properties(margin-right);
					}
				}

				.has-error {
					.ant-input-affix-wrapper {
						border-color: var(--mi-error-color, @mi-error-color);
					}
				}

				.ant-form {
					&-explain {
						.properties(margin-left, 12);
					}

					&-item {
						&.mb8 {
							.properties(margin-bottom);
						}
					}
				}
			}

			&-remember {
				.properties(margin-bottom);
				color: var(--mi-passport-remember-color, @mi-passport-remember-color);
				.properties(font-size, @mi-font-size-normal);
				.properties(padding-left, 12);

				a, a:hover {
					color: var(--mi-passport-remember-color, @mi-passport-remember-color);
					.properties(font-size, @mi-font-size-normal);
				}

				.@{mi-passport} {
					&-forget {
						.flex();

						> span {
							.properties(margin-right);
						}
					}
				}
			}

			&-remember,
			&-socialite {
				.ant-form-item-children {
					.flex(center, space-between);
				}

				&-link {
					color: var(--mi-passport-remember-color, @mi-passport-remember-color);
				}
			}

			&-submit {
				width: 100%;
				background-image: linear-gradient(to right, var(--mi-passport-submit-gradual-start-color, @mi-passport-submit-gradual-start-color) 0%, var(--mi-passport-submit-gradual-end-color, @mi-passport-submit-gradual-end-color) 100%);
				color: var(--mi-passport-submit-color, @mi-passport-submit-color);
				.border-radius(32);
				.properties(height, 42);
				.properties(font-size, @mi-font-size-normal);
				.properties(margin-bottom, 24);
				border: none;
				.flex();
				.letter-spacing();

				&-register {
					background-image: linear-gradient(to right, #787878 0%, #1d1e23 100%);
				}
			}

			&-quick {
				color: @mi-white-color;
				.flex();

				.anticon {
					.properties(font-size, 18);
					.properties(margin-left, 12);
					opacity: .6;
					color: @mi-white-color;
					cursor: pointer;

					&:hover {
						color: var(--mi-theme-color, @mi-theme-color);
						opacity: 1;
					}
				}

				&-mobile {
					width: 100%;
					flex-direction: column;
					color: #999;
					.properties(margin-top, 32);
				}

				&-line {
					display: block;
					border-top: 1px solid var(--mi-passport-line-color, @mi-passport-line-color);
					position: absolute;
					width: 100%;
					left: 0;
					.properties(top, 60);
					z-index: 1;
				}

				&-title {
					.properties(margin-top, 16);
					background: var(--mi-passport-bg-color, @mi-passport-bg-color);
					.properties(padding-left, 16);
					.properties(padding-right, 16);
					z-index: 2;
				}

				&-cates {
					.flex(center, space-between);
					.properties(margin-top, 24);
					width: 85%;

					.anticon {
						color: var(--mi-passport-icon-color, @mi-passport-icon-color);
						.properties(font-size, 28);
					}
				}
			}
        }
	}

	.@{mi-prefix}layout {
		&-footer {
			position: fixed;
			.properties(bottom);
			background: var(--mi-passport-bg-color, @mi-passport-bg-color);
			width: 100%;
		}
	}
	
	&-mobile {
		.@{mi-passport} {
			&-submit {
				.properties(margin-bottom);
			}
		}
	}
}

.@{mi-passport} {
	&-register {
		&-tips {
			.flex(flex-start, center);
			flex-direction: column;
			color: var(--mi-passport-text-color, @mi-passport-text-color);

			.info-color {
				color: var(--mi-info-color, @mi-info-color);
			}

			.red {
				color: var(--mi-error-color, @mi-error-color);
			}

			.success-color {
				color: var(--mi-success-color, @mi-success-color);
			}

			.theme-color {
				color: var(--mi-theme-color, @mi-theme-color);
			}

			p:last-child {
				margin-bottom: 0;
			}

			&-mobile {
				.properties(font-size, @mi-font-size-sm);
			}
		}
	}
}

.@{mi-password} {
	&-strength-item {
		.flex(center, flex-start);
		.properties(line-height, 34);
		.properties(width, 380);

		&:first-child {
			justify-content: flex-start;
		}

		.anticon {
			.properties(font-size, 24);

			&.failed,
			&.success {
				.properties(font-size, 14);
				color: var(--mi-error-color, @mi-error-color);
				.properties(margin-right);
			}

			&.success {
				color: var(--mi-theme-color, @mi-theme-color);
			}
		}
	}

	&-strength-group {
		.flex();
		.properties(margin-left, 8);
		.properties(margin-right, 8);

		.@{mi-password} {
			&-strength {
				.properties(width, 40);
				.properties(height, 12);
				background: var(--mi-passport-strength-color, @mi-passport-strength-color);
				display: inline-block;
				.properties(margin-right, 8);

				&:last-child {
					.properties(margin-right, 0);
				}

				&.active {
					background: var(--mi-theme-color, @mi-theme-color);
				}
			}
		}
	}
}

.@{mi-passport} {
	&-register-tips-mobile {
		.@{mi-password} {
			&-strength-item {
				.properties(width, 320);
			}
		}
	}
}